/*
  学习目标：分离reducer和初始值
  1. 将reducer提取为单独的函数
  2. 使用switch，替换if语句
  3. 提取变量，作为初始状态
*/

import { useEffect, useState } from 'react';
import { createStore } from 'redux';
import store from './store/index'

export default function App() {
    const [show, setShow] = useState(true);
    return (<div>
        <h1>Redux基础案例</h1>
        <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
        {show ? <Son /> : null}
    </div>)
}

function Son() {
    // 2. 给Son设置初始状态
    const [count, setCount] = useState(store.getState().count)
    useEffect(() => {
        // 3. 挂载后，监听仓库store的变化，将变化同步给React中的state
        const unFn = store.subscribe(() => {
            setCount(store.getState().count);
        });

        // 4. 卸载监听的数据
        return () => {
            unFn();
        };
    }, []);



    return (
        <div>
            <h2>子组件</h2>
            <h2>count:{count}</h2>
            {/* 💥 Redux根视图没有任何关系，与React也没有绑定关系 */}
            <button onClick={() => store.dispatch({ type: 'add' })}>+1</button>
            <button onClick={() => store.dispatch({ type: 'des' })}>-1</button>
        </div>
    );
}